/************************************************************************************
 Black Cat Cutting Studio

 First version

"Black Cat Cutting Studio" is protected by the copyright law
© 2011 Enrico Miglino / Tech Consulting (enrico.miglino@ovi.com)
Distributed under the LGPL 3.0 license.

This file is part of "Black Cat Cutting Studio".

    "Black Cat Cutting Studio" is free software: you can redistribute it
    and/or modify it under the terms of the Lesser GNU General Public License
    as published by the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    "Black Cat Cutting Studio" is distributed in the hope that it
    will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    Lesser GNU General Public License for more details.

    You should have received a copy of the Lesser GNU General Public License
    along with "Black Cat Cutting Studio".
    If not, see <http://www.gnu.org/licenses/>.
************************************************************************************/

// The creation of this list management was inspired to the Qt-List documentation examples
import QtQuick 1.0

Rectangle {
    id: colorToolbox
    color: "white"

    // Delegate for the recipes.  This delegate has two modes:
    // 1. List mode (default), which just shows the color and the corresponding layer name
    // 2. Details mode, which shows the details on the color and layer color parameters.
    Component {
        id: recipeDelegate

        Item {
            id: recipe

            // Create a property to contain the visibility of the details.
            // We can bind multiple element's opacity to this one property,
            // rather than having a "PropertyChanges" line for each element we
            // want to fade.
            property real detailsOpacity : 0
            // Minimum list height, that can be grown for screen adaption.
            // This value depends by the colour object real size.
            property int minListSize: 52
            property int minColorBoxSize: 40
            // Color property of every item of the list.
            // This value is set to a default of white value, changed by
            // the showing program.
            property int colorRvalue: 0
            property int colorGvalue: 0
            property int colorBvalue: 0

            width: listView.width
            height: minListSize

            // A simple rounded rectangle for the background of every element of the list
            Rectangle {
                id: background
                x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
                color: "ivory"
                border.color: "cadetblue"
                radius: 5
            }

            // This mouse region covers the entire delegate.
            // When clicked it changes mode to 'Details'.  If we are already
            // in Details mode, then no change will happen.
            MouseArea {
                anchors.fill: parent
                onClicked: recipe.state = 'Details';
            }

            // Lay out the page: picture, title and elements at the top, and method at the
            // bottom.  Note that elements that should not be visible in the list
            // mode have their opacity set to recipe.detailsOpacity.
            Row {
                id: topLayout
                x: 10; y: 10; height: recipeImage.height; width: parent.width
                spacing: 10

                // Structure of the color box for every list value:
                // The border image for the colour box
                Image {
                    id: recipeImage
                    width: minListSize; height: minListSize
                    source: "../images/colourBorder.png"
                }
                // The color box
                Rectangle {
                    width: minColorBoxSize; height: minColorBoxSize
                    color: "#" + recipe.colorRvalue + recipe.colorGvalue + recipe.colorBvalue
                }

                // The list column
                Column {
                    width: background.width - recipeImage.width - 20;
                    height: recipeImage.height
                    spacing: 5

                    Text {
                        text: title
                        font.bold: true; font.pointSize: 12
                    }

                    Text {
                        text: "Details"
                        font.pointSize: 10; font.bold: true
                        opacity: recipe.detailsOpacity
                    }

                    Text {
                        text: colorDetails
                        wrapMode: Text.WordWrap
                        width: parent.width
                        opacity: recipe.detailsOpacity
                    }
                }
            }

            Item {
                id: details
                x: 10; width: parent.width - 20
                anchors {
                    top: topLayout.bottom;
                    topMargin: 10; bottom: parent.bottom;
                    bottomMargin: 10
                }
                opacity: recipe.detailsOpacity

                Text {
                    id: methodTitle
                    anchors.top: parent.top
                    text: "Method"
                    font.pointSize: 12; font.bold: true
                }

                Flickable {
                    id: flick
                    width: parent.width
                    anchors {
                        top: methodTitle.bottom;
                        bottom: parent.bottom
                    }

                    contentHeight: methodText.height
                    clip: true

                    Text {
                        id: methodText;
                        text: method;
                        wrapMode: Text.WordWrap;
                        width: details.width
                    }
                }

                Image {
                    anchors { right: flick.right; top: flick.top }
                    source: "content/pics/moreUp.png"
                    opacity: flick.atYBeginning ? 0 : 1
                }

                Image {
                    anchors { right: flick.right; bottom: flick.bottom }
                    source: "content/pics/moreDown.png"
                    opacity: flick.atYEnd ? 0 : 1
                }
            }

            // A button to close the detailed view, i.e. set the state back to default ('').
            TextButton {
                y: 10
                anchors { right: background.right; rightMargin: 10 }
                opacity: recipe.detailsOpacity
                text: "Close"

                onClicked: recipe.state = '';
            }

            states: State {
                name: "Details"

                PropertyChanges { target: background; color: "white" }
                PropertyChanges { target: recipeImage; width: 130; height: 130 } // Make picture bigger
                PropertyChanges { target: recipe; detailsOpacity: 1; x: 0 } // Make details visible
                PropertyChanges { target: recipe; height: listView.height } // Fill the entire list area with the detailed view

                // Move the list so that this item is at the top.
                PropertyChanges { target: recipe.ListView.view; explicit: true; contentY: recipe.y }

                // Disallow flicking while we're in detailed view
                PropertyChanges { target: recipe.ListView.view; interactive: false }
            }

            transitions: Transition {
                // Make the state changes smooth
                ParallelAnimation {
                    ColorAnimation { property: "color"; duration: 500 }
                    NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
                }
            }
        }
    }

    // The actual list
    ListView {
        id: listView
        anchors.fill: parent
        model: RecipesModel {}
        delegate: recipeDelegate
    }
}
